<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>私教记录</title>
    <script src="js/flexible.js"></script>
    <link rel="stylesheet" href="css/flexible.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/vant.css">
    <script src="js/vue/vue.js"></script>
    <script src="js/vue/axios.js"></script>
    <script src="js/vue/MD5.js"></script>
    <script src="js/vue/vant.js"></script>
</head>
<body>
<div id="app">
    <template>
        <div class="nextTime">
            <span @click="beforeMonth">上一月</span>
            <span>{{from.ondate}}</span>
            <span @click="nextMonth">下一月</span>
        </div>
        <div v-if="dateList.length>0">
            <div class="record_list clearfix" v-for="item in dateList">
                    <div class="r_top">
                        <div class="l"><img :src="item.Picurl" alt=""></div>
                        <div class="m">
                            <div>
                                <div class="name fl">{{item.Sname}}</div>
                                <div class="r wc fr">
                                    <span v-if="item.IsReserve_C=='0'">已预约</span>
                                    <span v-else-if="item.IsReserve_C=='1'">已完成</span>
                                    <span v-else-if="item.IsReserve_C=='2'">已取消</span>
                                    <span v-else>已违约</span>
                                </div>
                            </div>
                            <div class="title">{{item.Title}}</div>
                            <div class="cdt">
                                <div class="addr">{{item.Space_name}}</div>
                                <div class="date">{{item.Oncurrdate}}</div>
                                <!-- <div class="time">09:37-12:37</div> -->
                                <div class="clear"></div>
                            </div>
                        </div>
                        
                        <div class="clear"></div>
                    </div>
                    <div class="r_bottom">
                        <div class="l">
                            <div class="tb">
                                <div class="name">预约时间</div>
                                <div class="value">{{item.Besdate}}</div>
                                <div class="clear"></div>
                            </div>
                
                            <div class="tb">
                                <div class="name">会员卡</div>
                                <div class="value">{{item.Cardname}}</div>
                                <div class="clear"></div>
                            </div>
                
                            <div class="tb">
                                <div class="name">扣费金额</div>
                                <div class="value" v-if="item.Cardtype=='10'">{{item.Charge}}</div>
                                <div class="value" v-else-if="item.Cardtype=='20'">{{item.Charge}}次</div>
                                <div class="value" v-else>{{item.Charge}}元</div>
                                <div class="clear"></div>
                            </div>
                
                        </div>
                        <!-- <div class="r">
                            <div class="record_btn">评价本节课</div>
                        </div> -->
                        <div class="clear"></div>
                    </div>
            </div>
        </div>
        <!-- <div class="notDate" v-else>
            <img src="images/notDate.jpg"/>
        </div> -->
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有数据了"
            @load="getCardList"
        >
        <van-cell
            v-for="item in lists"
            :key="item"
            :title="item"
        />
        </van-list> 
    </template>
</div>
</body>
<script>
var app = new Vue({
    el: '#app',
    data: {
        dateList:[],
        from:{
            ondate:'',
            page:'1',
            type:'1'
        },
        month:'',
        year:'',
        date:'',
        lists: [],
        loading: false,
        finished: false,
        totalnum:'',
        totalpage:'',
        listd:[]
    },
    created(){
        //this.getCardList()
        this.addDate()
    },
    methods: {
        addDate() {
            nowDate = new Date();
            this.year=nowDate.getFullYear()
            this.month=nowDate.getMonth() + 1
            this.date=nowDate.getDate()
            let monthS=''
            if(this.month<10){
                monthS="0"+this.month
            }else{
                monthS=this.month
            }
            let dates=''
            if(this.date<10){
                dates="0"+this.date
            }else{
                dates=this.date
            }
             this.from.ondate = this.year + '-' + monthS + '-' + dates
        },
        beforeMonth(){
            this.month--
            if(this.month==0){
                this.year--
                this.month=12
            }
            let monthS=''
            if(this.month<10){
                monthS="0"+this.month
            }else{
                monthS=this.month
            }
            let dates=''
            if(this.date<10){
                dates="0"+this.date
            }else{
                dates=this.date
            }
            this.from.ondate = this.year + '-' + monthS + '-' + dates
            this.from.page="1"
            this.dateList=[]
            this.listd=[]
            this.loading=false,
            this.finished=false,
            this.getCardList()
        },
        nextMonth(){
            if(this.month==12){
                this.year++
                this.month=1
            }else{
                this.month++
            }
            let monthS=''
            if(this.month<10){
                monthS="0"+this.month
            }else{
                monthS=this.month
            }
            let dates=''
            if(this.date<10){
                dates="0"+this.date
            }else{
                dates=this.date
            }
            this.from.ondate = this.year + '-' + monthS + '-' + dates
            this.from.page="1"
            this.dateList=[]
            this.listd=[]
            this.loading=false,
            this.finished=false,
            this.getCardList()
        },
        getCardList() {
            setTimeout(() => {
            // 异步更新数据
            getVs()
            const params=this.from
            axios.get('/mobileapi/member/user_info.php?act=curr_list',{params:params}).then(data =>{
                    console.log(data.data)
                    let { msg, code,user} = data.data
                        if (code !== 200) {
                            _this.$message({
                                message: msg,
                                type: 'error'
                            });
                        } else {
                            data=data.data
                            this.listd=data.data.list
                            if(this.listd.length>0||this.dateList.length>0){
                                //console.log("1")
                                this.totalnum=data.data.totalnum
                                this.from.page=parseInt(data.data.page)+1
                                for (let i = 0; i < this.listd.length; i++) {
                                    this.dateList.push(this.listd[i])
                                }
                                for(let i in this.dateList){
                                    if(this.dateList[i].Picurl==''||this.dateList[i].Picurl==null){
                                        this.dateList[i].Picurl="images/xiangce.png"
                                    }
                                    if(this.dateList[i].Charge==''||this.dateList[i].Charge==null){
                                        this.dateList[i].Charge="不计扣费"
                                    }
                                }
                                // 加载状态结束
                                this.loading = false
                                //this.finished = false
                                // 数据全部加载完成
                                if (this.dateList.length >= this.totalnum) {
                                    this.finished = true
                                    //$(".van-list__finished-text").show();
                                }
                            }else{
                                //console.log("2")
                                this.loading = false
                                this.finished = true
                                //$(".van-list__finished-text").hide()
                            }
                        }
                    }).catch(function (error) {
                        console.log(error); 
                })
            }, 500);
        }
    }  
})    
</script>
</html>